<template>
	<view class="my-container">
		<!-- 个人信息卡片 -->
		<view class="user-card">
			<view class="avatar">
				<u-icon name="account" size="60" color="#1296db"></u-icon>
			</view>
			<view class="user-info">
				<text class="nickname">我的账号</text>
			</view>
		</view>

		<!-- 订单记录 -->
		<view class="order-section">
			<view class="section-title">
				<text>我的订单</text>
			</view>
			<view class="order-list">
				<view v-for="order in orderHistory" :key="order.id" class="order-item">
					<view class="order-header">
						<text class="order-time">{{ order.time }}</text>
						<text class="order-status">{{ order.status }}</text>
					</view>
					<view class="dishes-list">
						<view v-for="dish in order.dishes" :key="dish.id" class="dish-item">
							<image :src="dish.image" mode="aspectFill" class="dish-image" />
							<view class="dish-info">
								<text class="dish-name">{{ dish.name }}</text>
								<view class="dish-detail">
									<text class="price">¥{{ dish.price }}</text>
									<text class="count">x{{ dish.count }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="order-footer">
						<text class="total-info">共{{ order.totalCount }}件 合计：</text>
						<text class="total-price">¥{{ order.totalPrice }}</text>
					</view>
				</view>
			</view>
		</view>

		<view>
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
				:maxCount="10"></u-upload>
		</view>
	</view>
</template>

<script>
import fileUploadPublic from '../../api/upload/upload.js';
export default {
	data() {
		return {
			fileList1: [],
			orderHistory: [
				// 示例订单数据
				{
					id: 1,
					time: '2024-03-20 12:30',
					status: '已完成',
					totalCount: 3,
					totalPrice: 86,
					dishes: [
						{
							id: 'h1',
							name: '宫保鸡丁',
							price: 28,
							count: 1,
							image: '/static/banner/banner1.jpg'
						},
						{
							id: 'h2',
							name: '水煮鱼',
							price: 46,
							count: 1,
							image: '/static/banner/banner2.jpg'
						},
						{
							id: 'c2',
							name: '凉拌黄瓜',
							price: 12,
							count: 1,
							image: '/static/banner/banner5.jpg'
						}
					]
				}
			]
		}
	},
	methods: {
		// 这里可以添加获取订单历史的方法
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: "uploading",
					message: "上传中",
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: "success",
						message: "",
						url: result,
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					sslVerify: false,
					url: fileUploadPublic, // 仅为示例，非真实的接口地址
					filePath: url,
					name: "filename",
					formData: {
						user: "test",
					},
					success: (res) => {
						setTimeout(() => {
							resolve(res.data.data);
						}, 1000);
					},
				});
			});
		},
	}
}
</script>

<style scoped>
.my-container {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 100rpx;
}

.user-card {
	background: #fff;
	padding: 40rpx;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.avatar {
	margin-right: 30rpx;
}

.user-info {
	flex: 1;
}

.nickname {
	font-size: 32rpx;
	font-weight: bold;
}

.order-section {
	background: #fff;
	padding: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.order-item {
	margin: 20rpx 0;
	padding: 20rpx;
	background: #f8f8f8;
	border-radius: 12rpx;
}

.order-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.order-time {
	color: #666;
	font-size: 26rpx;
}

.order-status {
	color: #1296db;
	font-size: 26rpx;
}

.dishes-list {
	border-top: 1rpx solid #eee;
	border-bottom: 1rpx solid #eee;
	padding: 20rpx 0;
}

.dish-item {
	display: flex;
	margin-bottom: 20rpx;
}

.dish-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}

.dish-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.dish-name {
	font-size: 28rpx;
}

.dish-detail {
	display: flex;
	justify-content: space-between;
}

.price {
	color: #ff4d4f;
	font-size: 26rpx;
}

.count {
	color: #666;
	font-size: 26rpx;
}

.order-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-top: 20rpx;
}

.total-info {
	font-size: 26rpx;
	color: #666;
}

.total-price {
	color: #ff4d4f;
	font-size: 32rpx;
	font-weight: bold;
}
</style>